import React, { FC, useState } from 'react'
import book from '@/assets/book.svg'
import './index.less'
import styles from './index.less'
import Footer from '@/components/Footer'
import { history, useModel } from 'umi'
import { Form, Input, Button, Checkbox, Typography, Tooltip, Tabs } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { ProFormCheckbox, ProFormText, LoginForm } from '@ant-design/pro-form'
import { useDispatch } from 'dva'

import { ACTIONS } from '@/models'
import { IUserLoginResponse } from '@/services/user/types'

const Login: FC = () => {
  const dispatch = useDispatch()
  const onFinish = async (values: any) => {
    dispatch({
      type: ACTIONS.user.login,
      payload: { username: values?.username, password: values?.password },
      callback: (data: IUserLoginResponse) => {
        localStorage.setItem('token', data?.token)
        localStorage.setItem('username', data?.username)
        history.push('/')
        // console.log(data)
      }
    })
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <LoginForm
          name="basic"
          initialValues={{ remember: true, autoLogin: true }}
          logo={<img alt="logo" src={book} />}
          subTitle="课程分析系统"
          className="login-form"
          title="USER ADMIN"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Tabs defaultActiveKey="account">
            <Tabs.TabPane key="account" tab="账户密码登录" />
          </Tabs>
          <>
            <ProFormText
              name="username"
              placeholder="请输入用户名"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={styles.prefixIcon} />
              }}
              rules={[{ required: true, message: '请输入用户名!' }]}
            />

            <ProFormText.Password
              name="password"
              placeholder="请输入您的密码"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={styles.prefixIcon} />
              }}
              rules={[{ required: true, message: '请输入您的密码' }]}
            />
          </>

          <div
            style={{
              marginBottom: 24
            }}
          >
            <ProFormCheckbox noStyle name="autoLogin">
              记住密码
            </ProFormCheckbox>
            <a
              style={{
                float: 'right'
              }}
              onClick={() => history.push('/user/signUP')}
            >
              现在注册！
            </a>
          </div>
        </LoginForm>
        <Footer />
      </div>
    </div>
  )
}

export default Login
